<template lang="html">
  <div id="order-content">
   	<div v-for='(item,index) in commodity' :key='index'>
   		<div class='cart-center'> 
        <div class='commodity-img'>
          <img :src='item.img' alt="">
        </div>
        <div class='commodity-p'>
            <p>
              <span class='commodity-p-title'>{{item.title}}</span>
              <span class='commodity-p-right'>￥{{item.price}}</span>
            </p>
        </div>
        <div class='commodity-center'>
          <div class='commodity-center-left'>
            {{item.introduce}}
          </div>
          <div class='commodity-center-right'>
            ×1
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'OrderContent',
  data(){
  	return{

  	}
  },
  props:{
  	commodity:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  },
  methods:{
    XinHander(item){ 
      if(item.flag){
        item.flag = false
      }else{
        　item.flag = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
#order-content{
  width: 100%;
  height: 100%;
  .cart-center{
    width: 100%;
    margin-top:0.6rem;
    margin-bottom:0.6rem;
    height: 2.4rem;
    float: left;
    padding:0.16rem;
    box-sizing:border-box;
    .commodity-img{
      width: 35%;
      height: 100%;
      float: left;
      padding-right:0.16rem;
      box-sizing:border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .commodity-p{
      width: 65%;
      height: 0.6rem;
      line-height:0.6rem;
      float: left;
      .commodity-p-title{
        color:#000;
        font-size:0.35rem;
      }
      .commodity-p-right{
        color: red;
        font-size:0.35rem;
        float: right;
        margin-right: 3%;
      }
    }
    .commodity-center{
      width: 65%;
      height: 1.3rem;
      float: left;
      padding:0.2rem 0;
      box-sizing:border-box;
      .commodity-center-left{
        width: 80%;
        float: left;
      }
      .commodity-center-right{
        width: 20%;
        float: right;
        padding:0 8%;
        box-sizing:border-box;
      }
    }
  }
}
</style>

